<template>
    <view>
        <view class="viewTab">
            <view class="tabBar top" :style="{ '--color': color, backgroundColor: tabBar.bgColor, '--inactive-color': tabBar.inactiveColor || '#666' }">
                <view class="list flex-1" v-for="(item, index) in tabBar.list" :key="index" :class="!item.isNav && tab == item.id ? 'theme' : 'inactive'" @click="swichTab(item)">
                    <view class="bulge flexac zIndex m-bot4" :style="{ background: tabBar.iconBg || '#fff' }" v-if="item.mode">
                        <view class="iconfont size50" :class="item.icon" :style="{ color: tabBar.iconColor || '#666' }"></view>
                    </view>
                    <view class="iconfont size40 m-bot4" :class="item.icon" v-else></view>
                    <text class="h6">{{ item.title }}</text>
                </view>
            </view>
        </view>

        <showModel @cancelFunc="setHome({ showMode: false })" v-if="showMode" type="2"></showModel>
        <!-- 打开客服 -->
        <KeFu v-if="showKefu" @cancelFunc="setHomeKefu({ showKefu: false })" @openModal="setHome({ showMode: true })"></KeFu>
        <!-- 分享海报 -->
        <SharePoster v-if="showShareQr" myid=" " type="1" pageType="0" @closePoster="setHomeShare({ showShareQr: false })"></SharePoster>
        <!-- 口令弹框 -->
        <prompt v-if="showPrompt" @cancelFunc="setPrompt(false)"></prompt>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import KeFu from '@/components/showKefu.vue';
    import SharePoster from '@/components/sharePoster.vue';
    export default {
        name: 'tabBar',
        props: ['tab'],
        data() {
            return {
                defaultTit: {
                    // tabBar页面的默认标题
                    3: '分类',
                    4: '点餐',
                    5: '门店',
                    6: '预约活动',
                    7: '购物车',
                    9: '资讯',
                    11: '游戏',
                    14: '学习',
                    15: '答题',
                    16: '会员中心',
                    17: '品牌',
                    18: '分类'
                }
            };
        },
        components: {
            KeFu,
            SharePoster
        },
        created() {
            uni.hideTabBar();
            if (!this.tab || !this.tabBar) return;
            const item = this.tabBar.list.find((n) => !n.isNav && n.id == this.tab);
            const tabTitle = this.defaultTit[this.tab] || '';
            if (!item) return this.changeTab({ tabTitle, tabId: this.tab });
            this.changeTab({ tabTitle: item.title || tabTitle, tabId: item.id });
        },

        methods: {
            ...mapMutations(['changeTab', 'setPrompt', 'setHome', 'setHomeKefu', 'setHomeShare']),
            swichTab(item) {
                if (this.showKefu) this.setHomeKefu({ showKefu: false });

                // 功能
                if (item.isNav == 2) return this.$pop.funcBtnClick(item);

                // 跳转普通页面
                if (item.isNav == 1) return this.$banerGo(item);

                // 跳tabBar页面
                let pages = getCurrentPages();
                let page = pages[pages.length - 1];
                console.log('当前tab', item, page);
                if (page.$page.fullPath == item.path) return;
                // 所有分类(电商)
                if (item.id == 3 && item.cateType) {
                    const path = `${item.path}?cateType=${item.cateType}`;
                    this.$rectTo(path);
                    return;
                }
                // 某个分类
                if (item.id == 12) {
                    const path = `${item.path}?back=0&classId=${item.classId}`;
                    this.$rectTo(path);
                    return;
                }
                // 订单
                if (item.id == 13) {
                    const path = `${item.path}?back=0`;
                    this.$rectTo(path);
                    return;
                }

                this.$rectTo(item.path);
            }
        },

        computed: {
            ...mapState(['tabBar', 'color', 'tabId', 'vid', 'showPrompt', 'showMode', 'showKefu', 'showShareQr'])
        }
    };
</script>

<style lang="scss" scoped>
    .viewTab {
        width: 100%;
        height: 100rpx;
        box-sizing: content-box;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tabBar {
        width: 100%;
        height: 100rpx;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10060;
        box-sizing: content-box;
        display: flex;
        align-items: center;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .bulge {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-top: -60rpx;
            box-shadow: 0 0 20rpx 0 rgba(214, 214, 214, 0.5);
        }
    }

    .Cutoff {
        width: 100%;
        height: 360rpx;
        box-sizing: border-box;

        padding-bottom: constant(safe-area-inset-bottom);
        /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom);
        /*兼容 IOS>11.2*/
    }

    .theme {
        color: var(--color);
    }
    .inactive {
        color: var(--inactive-color);
    }
</style>
